<template>
	<view class="position-relative">
		<slot></slot>
		<view class="flex align-center position-absolute text-white rounded-lg" 
		style=" bottom: 0; left: 0; right: 0; height: 70rpx; font-size: 30rpx;
		background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8)); ">
			<view class="mx-1 text-ellipsis" style="width: 80%;">{{list[current].title}}</view>
			<view class="flex align-center justify-end flex-shrink" style="width: 20%;">
				<view v-for="(item,index) in list" :key="index" class="rounded mx-1" 
				style="width: 16rpx; height: 16rpx;" :style="index===current ? 'background-color: rgba(255,255,255,1)':'background-color: rgba(255,255,255,0.5)'" ></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			},
			current:{
				type:Number,
				default:0
			}
		}
	}
</script>

<style>
</style>
